<template>
  <!-- 额度占用情况环图 -->
  <div class="cashFlowChartPage">
    <div class="chartBox" id="cashFlowChartId"></div>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from "vue";
import {changeNumToWan} from "../../utils/handelScreen";
import echarts from "@/common/utils/echarts.js";

const cashFlowChartRef = ref(null);


// 调用接口
const initChartOption = (optionsData) => {
  const options = reactive({
    color: ["#80FFA5"],
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
//   legend: {
//     top: "20",
//     selectedMode: false,
//     data: ["资金缺口"],
//     textStyle: {
//       color: "#D3E3FF",
//       fontWeight: "500",
//       fontFamily: "SourceHanSansMedium",
//     },
//     itemStyle: {
//       opacity: 0,
//     },
//     itemWidth: 60,
//     lineStyle: {
//       type: "solid",
//       color: "#1978E5",
//     },
//   },
    grid: {
      left: "3%",
      right: "3%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        name: "单位(月)",
        nameTextStyle: {
          color: "#D3E3FF",
          fontWeight: "500",
          align: "right",
          verticalAlign: "bottom",
          lineHeight: 25,
        },
        boundaryGap: false,
        triggerEvent: true,
        data: optionsData.XData,
        axisLabel: {
          color: "#D3E3FF",
        },
        axisTick: {
          // 去掉X轴刻度
          show: false,
        },
        axisLine: {
          // 不显示X轴线
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "单位(万元)",
        nameTextStyle: {
          color: "#D3E3FF",
          fontWeight: "500",
          align: "center",
        },
        // 横向分割线配置
        splitLine: {
          lineStyle: {
            type: [5, 10], // 虚线
            color: ["#B0D7FF"],
            opacity: 0.3,
          },
        },
        axisLabel: {
          color: "#D3E3FF",
        },
      },
    ],
    series: [
      {
        name: "资金缺口",
        type: "line",
        stack: "Total",
        //   smooth: true,
        lineStyle: {
          // 设置线条颜色
          width: 3,
          color: "#1978E5",
        },
        itemStyle: {
          // 设置线条上点的颜色
          color: "#00D3FD",
        },
        showSymbol: false,
        areaStyle: {
          origin: "start",
          opacity: 0.8,
          shadowColor: "rgba(0, 0, 0, 0.5)",
          shadowBlur: 10,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              // 渐变颜色
              {
                offset: 0,
                color: "rgb(18, 209, 242)",
              },
              {
                offset: 0.1,
                color: "rgb(17, 211, 243)",
              },
              {
                offset: 0.2,
                color: "rgb(16, 210, 243)",
              },
              {
                offset: 0.3,
                color: "rgb(15, 203, 236)",
              },
              {
                offset: 0.4,
                color: "rgb(13, 109, 156)",
              },
              {
                offset: 0.5,
                color: "rgb(15, 119, 163)",
              },
              {
                offset: 1,
                color: "#000",
              },
            ],
            global: false,
          },
        },
        emphasis: {
          focus: "series",
        },
        data: optionsData.data,
      },
    ],
  });
  cashFlowChartRef.value.setOption(options);
}

// 在父组件中调用
const initCashFlowChart = (optionsData) => {
  // 基于准备好的dom，初始化echarts实例
  cashFlowChartRef.value = echarts.init(
      document.getElementById("cashFlowChartId")
  );
  initChartOption(optionsData);
};

defineExpose({
  initCashFlowChart,
});
</script>

<style lang="scss" scoped>
.cashFlowChartPage {
  width: 100%;
  height: 100%;

  .chartBox {
    width: 100%;
    height: 100%;
  }
}
</style>
